<template>
    <div class="home-info" flex="dir:top cross:center main:left">
        <div class="logo">
            <div class="bjs-logo">
                Forest Secret <span style="font-size: 13px;">敬献</span>
            </div>
            <div class="fs-git" flex="dir:bottom cross:center main:left" @click="toWeb(resource)">
                源码
            </div>
            <div class="fs-home" style="margin:9px 4px 0 4px">|</div>
            <div class="fs-home" @click="toWeb(official)">官网</div>
        </div>
        <div class="info-title" flex="dir:bottom cross:left main:bottom">
            <div class="r-three">{{rThree}}</div>
            <div class="r-two">{{rTwo}}</div>
            <div class="r-one">{{rOne}}</div>
        </div>
        <div class="info-button" flex="dir:top cross:left main:left">
            <div flex="dir:left cross:center main:left" style="margin-left: 100px;">
                <button class="more" @click="toList">More</button>
                <span style="margin: 0 10px;color: #7a7a7a;font-weight: bold;">or</span>
                <div style="font-size: 30px;letter-spacing: 1px;color: #cbcbcb;font-weight: bold;cursor: pointer;"
                     @click="toWeb(profile)">
                    Profile
                </div>
            </div>
        </div>
        <div class="info-footer" flex="dir:bottom cross:center main:left">
            <div class="record">{{record}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "homeInfo",
        data () {
            return {
            }
        },
        computed : {
            rOne     () {return this.$FS.USER.WEB.R_ONE;},
            rTwo     () {return this.$FS.USER.WEB.R_TWO;},
            rThree   () {return this.$FS.USER.WEB.R_THREE;},
            record   () {return this.$FS.USER.WEB.RECORD_ID;},
            profile  () {return this.$FS.USER.PROFILE_URL},
            resource () {return this.$FS.SYS.GITEE.ELECTRON},
            official () {return this.$FS.SYS.OFFICIAL}
        },
        methods : {
            toList () {
              this.$router.push({name:'articleWeb'})
            },
            toWeb (url) {
                window.open(url)
            }
        }
    }
</script>

<style scoped lang='scss'>
    @import url("https://fonts.googleapis.com/css?family=Lato:500,700,800");
    .home-info {
        @include boxBase();

        .info-title {
            height: 50%;
            width: 100%;
            font-size: 50px;
            color: white;
            .r-one {
                font-weight: bold;
                margin-left: 100px;
                font-size: inherit;
                color: inherit;
            }
            .r-two {
                font-family: Lato;
                margin-left: 100px;
                font-size: 27px;
                color: #bcbcbc;
            }
            .r-three {
                font-family: Lato;
                margin-left: 100px;
                font-size: 15px;
                color: #7a7a7a;
            }
        }

        .info-button {
            height: 50%;
            width: 100%;
            padding-top: 30px;

            .more {
                outline: none;
                padding: 10px 30px;
                border-radius: 6px;
                border: 0;
                font-size: 25px;
                font-weight: bold;
                color: #7a7a7a;
                background-color: #333333;
                transition: background-color 0.5s,box-shadow 0.8s,color 1s;
                cursor: pointer;
                &:active {
                    border-top: 1px solid white;
                    border-left: 1px solid white;
                }
                &:hover {
                    color: #d8d8d8;
                    background-color: black;
                    box-shadow: 0 0 50px 1px black;
                }
                &:focus {
                    border: 0;
                }
            }

        }
        .info-footer {
            width: 100%;
            height: 30px;

            .record {
                width: 100%;
                padding-left: 10px;
                color: #7a7a7a;
                font-size: 12px;
            }

        }
    }

    .logo {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        margin-left: 30px;
        height: 30px;

        .fs-git,.fs-home {
            height: 20px;
            margin-top: 11px;
            margin-left: 150px;
            font-size: 13px;
            font-weight: 800;
            transition: color 1s;
            cursor: pointer;
            color: #6a6a6a;
            &:hover {
                color: #bcbcbc;
            }
        }

        .fs-home {
            margin-left: 0;
        }
    }

    .bjs-logo {
        height: 100%;
        font-size: 23px;
        font-weight: 800;
        color: transparent;
        font-family: Lato;
        letter-spacing:1px;
        background: linear-gradient(
            90deg,
            #313131,
            #fff3fc,
            #313131
        );
        -webkit-background-clip: text;
        animation: glow 10s linear infinite;
        transition: 1.5s;
        background-size: 300%;
        cursor: pointer;
    }
    @keyframes glow {
        to {
            background-position: -300%;
        }
    }
</style>
